<!--
 * @Author: hq
 * @Date: 2022-05-18 21:23:44
 * @LastEditors: hq
 * @LastEditTime: 2022-05-25 18:57:58
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="card_con">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in Tabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <div v-if="index === 0">
            <Base></Base>
          </div>
          <div v-if="index === 1">
            <Sys></Sys>
          </div>
          <div v-if="index === 2">
            <Size></Size>
          </div>
          <div v-if="index === 3">
            <DataBase></DataBase>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Base from "../sys_set/base.vue";
import Sys from "../sys_set/sys.vue";
import Size from "../sys_set/upload.vue";
import DataBase from "../sys_set/dataBase.vue";
export default {
  components: { Base, Sys, Size, DataBase },
  data() {
    return {
      activeName: "0",
      Tabs: [
        { title: "基础" },
        { title: "系统" },
        { title: "上传" },
        { title: "数据库" },
      ],
      switchValue: true,
      yuming: "",
      imageUrl: "",
    };
  },
  methods: {
    handleClick(tab) {
      tab;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.tablescope {
  .el-switch__label--left {
    position: relative;
    left: 55px;
    color: #fff;
    z-index: -1111;
    span {
      font-size: 12px;
    }
  }
  //   .el-switch__core {
  //     width: 50px !important;
  //   }
  .el-switch__label--right {
    position: relative;
    right: 55px;
    color: #fff;
    z-index: -1111;
    span {
      font-size: 12px;
    }
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}
</style>
